<template>
    <div class="info">
      <div class="user" >
        <span class="welcome">您好，{{ state.doctorBaseInfo.doctorName }} !</span>
        <el-dropdown>
          <div >
            <img :src="doctorQRcode"  alt="QR_Code" class="el-dropdown-link">
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <img :src="doctorQRcode" alt="QR_Code" class="QR_Code">
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="time">
        <span>{{ parseTime(date) }}</span>
      </div>
    </div>
    <div class="patient-container">
      <div class="pnumber">
        <div class="text">
          <span>患者总数</span>
          <span>{{ patient_count }}</span>
        </div>
        <div class="text">
          <span>特别关心</span>
          <span>{{ patient_care }}</span>
        </div>
        <div class="text">
          <span>昨日数据统计次数</span>
          <span>{{ yesterday_number }}</span>
        </div>
        <div class="text">
          <span>昨日血压异常人次</span>
          <span>{{ yesterday_abnormal }}</span>
        </div>
      </div>
      <div class="pchart">
        <div class="pchart_word">
          <span>绑定患者最近十天血压数据统计次数</span>
        </div>
        <div class="numchart_container">
          <div ref="numchart" class="numchart_main"></div>
        </div>
      </div>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance,computed} from 'vue';
import * as echarts from 'echarts';
import { patientDoctorCount } from '/@/api/patient_doctor/patient_doctor';
import { useDoctorInfo } from '/@/stores/doctorInfo';
import { patientDoctorCountcare } from '/@/api/patient_doctor/patient_doctor';
import { patientDoctoryesterdaynumber } from '/@/api/patient_doctor/patient_doctor';
import { patientDoctoryesterdayabnormal } from '/@/api/patient_doctor/patient_doctor';
import { persureHeartRate } from '/@/api/patient_doctor/patient_doctor';
import { doctorqrcode } from '/@/api/patient_doctor/patient_doctor';

const date = ref(new Date());

setInterval(() => {
  date.value = new Date();
}, 1000);

const state = useDoctorInfo();
const Uid = state.doctorBaseInfo.doctorUid;
const patient_care = ref(0);
const yesterday_number = ref(0);
const yesterday_abnormal = ref(0);
const patient_count = ref(0);
const numchart = ref(null);
const doctorQRcode = ref(null);

/* 患者数据 */
const fetchPatientCount = async (Uid:string) => {
  try {
    const response = await patientDoctorCount(Uid);
    console.log(response);
    patient_count.value = parseInt(<string><unknown>response,10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};

const fetchPatientCountcare = async (Uid:string) => {
  try {
    const response = await patientDoctorCountcare(Uid);
    console.log(response);
    patient_care.value = parseInt(<string><unknown>response, 10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};

const fetchpatientyesterdaynumber = async (Uid:string) => {
  try {
    const response = await patientDoctoryesterdayabnormal(Uid);
    console.log(response);
    yesterday_number.value = parseInt(<string><unknown>response,10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};

const fetchpatientyesterdayabnormal = async (Uid:string) => {
  try {
    const response = await patientDoctoryesterdaynumber(Uid);
    console.log(response);
    yesterday_number.value = parseInt(<string><unknown>response,10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};



/* 折线图 */
interface NumChartType {
  categories: string[];
  data: number[];
}

const numcharttype = ref<NumChartType>({
  categories: [],
  data: []
})

const numerchart = async (Uid:string) => {
  try {
    const responseData = await persureHeartRate(Uid);

    const categories = Object.keys(responseData);
    const data = Object.values(responseData).map(value => Number(value));

    numcharttype.value = {
      categories: categories,
      data: data
    };

    if (numchart.value) {
    const mychart = echarts.init(numchart.value);
    window.addEventListener('resize', function () {
      mychart.resize();
    })
    const option = {
      grid: {
        containLabel: true,
        x: 60,//左
        y: 30,//上
        x2: 30,//右
        y2: 30,//下
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: numcharttype.value.categories,
        axisLabel: {
          interval: 0,
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: numcharttype.value.data,
        type: 'line'
      }]

    };
    mychart.setOption(option);
  }

  } catch (error) {
    console.error('Error fetching heart rate data:', error);
  }
}


const fetchdoctorqrcode = async (Uid:string) => {
  try {
    const response = await doctorqrcode(Uid);
    console.log(response);
    doctorQRcode.value = response.data;
    /* console.log(doctorQRcode); */
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};

onMounted(() => {
  fetchPatientCount(Uid);
  fetchPatientCountcare(Uid);
  fetchpatientyesterdaynumber(Uid);
  fetchpatientyesterdayabnormal(Uid);
  numerchart(Uid);
  fetchdoctorqrcode(Uid);

});

onActivated(() => {
  fetchPatientCount(Uid);
  fetchPatientCountcare(Uid);
  fetchpatientyesterdaynumber(Uid);
  fetchpatientyesterdayabnormal(Uid);
  numerchart(Uid);
  fetchdoctorqrcode(Uid);
});


</script>


<style scoped>
.info {
  display: flex;
  margin-top: -1%;
}

.user{
  display: flex;
  flex-basis: 78%;
  align-items: center;
}

.time{
  display: flex;
  flex-basis: 22%;
  align-items: flex-end;
  font-size: 1.125em;
  color: #81838F;
}

.welcome{
  font-weight: bold;
  font-size: 1.75em;
  text-align: left;
}

.el-dropdown-link{
  width: 2.5em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}


.QR_Code{
  width: 10em;
  height: 10em;
}

.dropdown-menu-custom {
  width: 10em;
  height: 10em;
  padding: 0;
}

.dropdown-item-custom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.patient-container {
  display: flex;
  width: 100%;
}

.pnumber {
  flex: 3.5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 2%;
  margin-bottom: 0.5%;
}

.text{
  flex-basis: 50%;
  text-align: left;
  flex-direction: column;
  justify-content: center;
  padding: 1%;
}

.text > span:first-child {
  display: block;
  font-weight: 400;
  font-size: 1em;
  color: rgba(129, 131, 141);
}

.text > span:last-child {
  display: block;
  font-weight: 600;
  font-size: 1.75em;
}

.pchart {
  flex: 6.5;
  width: 100em;
  height: 16em;
}

.pchart_word{
  display: block;
  text-align: center;
  font-size:1em;
  margin-top: 1%;
}

.numchart_container{
  width: 100%;
  height: 100%;
}

.numchart_main{
  width:90%;
  height:90%;
}



</style>


